<template>
  <el-dialog title="部门管理" class="department" :visible.sync="isDial" width="600px" height='200'>
    <el-tree
      :data="data4" 
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span class="operation">
          <el-button type="text" size="mini" @click="() => append('add',data)" v-if="data.level<6">{{data.level==1?'新建网点':'新建部门'}}</el-button>
          <el-button type="text" size="mini" @click="() => append('edit',data)">修改</el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>
  </el-dialog>
</template>
<script>
import {depList} from "../../assets/session.js";
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      isDial: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      data4:[],
    };
  },
  created() {
    this.$root.$on("department", data => {
      this.departments()
      this.isDial = true;
    });
    this.$root.$on('saveDep',data=>{
      this.departments()
    })
  },
  methods: {
    handleNodeClick(data) {
    },
    append(type,data) {
      let nodeInfo={}
      if(type=='edit'){ 
        let depData=this.data4
        if(data.parentId==0){
          nodeInfo.parentName='绿城家博'
        }else{
          for(let i in depData){
            if(depData[i].id==data.parentId){
              nodeInfo.parentId=depData[i].id
              nodeInfo.parentName=depData[i].name
              break;
            }else{
              for(let j in depData[i].children){
                if(depData[i].children[j].id==data.parentId){
                    nodeInfo.parentId=depData[i].children[j].id
                    nodeInfo.parentName=depData[i].children[j].name
                    break;
                }else{
                  for(let k in depData[i].children[j].children){
                    if(depData[i].children[j].children[k].id==data.parentId){
                        nodeInfo.parentId=depData[i].children[j].children[k].id
                        nodeInfo.parentName=depData[i].children[j].children[k].name
                        break;
                    }
                  }
                }
              }
            }
          }
        }
        nodeInfo.id=data.id
        nodeInfo.name=data.name
        nodeInfo.type=data.type
      }else{
        nodeInfo.id=''
        nodeInfo.name=''
        nodeInfo.parentId=data.id
        nodeInfo.type=data.type
        nodeInfo.parentName=data.name
      }
      
      this.$root.$emit("addDep",type,nodeInfo)
    },
    remove(node, data) {
      let that=this
      request.delAlert({
          name:'删除该部门',
          that,
          fn(obj){
              let url='department/'+data.id+'?greenToken='+request.greenToken
              request.ajaxDel({
                url,
                that,
                fn(res){
                  that.$message(obj)
                  // that.department();
                  that.$root.$emit('saveDep','on')
                }
              })
          }
      })
    },
    departments(){ //查询所有部门
      let url='department/all'
      let that=this
      request.ajaxGet({
        url,
        that,
        fn(res){
          let arr=depList(res)
          that.data4=arr
        }
      })
    },
  }
};
</script>
<style lang="less" scoped>
.department {
  text-align: left;
  .el-dialog__body {
    height: 400px !important;
  }
  .el-tree-node__content{
    .custom-tree-node {
        
        .operation{
          display: none;
        }
    }
  }
  .el-tree-node__content:hover .custom-tree-node{
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
  }
  .el-tree-node__content:hover .operation{
    display: inline;
  }
}
  

</style>
